<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title th:text="#{title}">Title</title>
<link
	href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"
	th:href="@{${CSSURL}+'/bootstrap.min.css'}" rel="stylesheet" />
<link
	href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css"
	th:href="@{${CSSURL}+'/bootstrap-theme.min.css'}" rel="stylesheet" />
<link href="//getbootstrap.com/examples/offcanvas/offcanvas.css"
	th:href="@{${CSSURL}+'/offcanvas.css'}" rel="stylesheet" />
<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
	th:href="@{${JSURL}+'/jquery-ui-1.10.3/themes/base/jquery.ui.all.css'}" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.0.3.min.js"
	th:src="@{${JSURL}+'/jquery-2.0.3.min.js'}" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js" 
	th:src="@{${JSURL}+'/jquery-ui-1.10.3/ui/jquery-ui.js'}" type="text/javascript"></script>	
<script src="//knockoutjs.com/downloads/knockout-3.0.0.js"
	th:src="@{${JSURL}+'/knockout-3.0.0.js'}" type="text/javascript"></script>
<script
	src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"
	th:src="@{${JSURL}+'/bootstrap.min.js'}" type="text/javascript"></script>
</head>
<body>
	<div th:fragment="header">
		<div role="navigation" class="navbar navbar-fixed-top navbar-inverse">
			<div class="container">
				<div class="navbar-header">
					<button type="button" data-toggle="collapse"
						data-target="navbar-collapse" class="navbar-toggle">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span> <span class="icon-bar"></span>
					</button>
					<a href="#" th:href="@{/home}" class="navbar-brand"
						th:text="#{title}">Title</a>
				</div>
				<div class="collapse navbar-collapse" th:each="menu : ${menus}">
					<ul class="nav navbar-nav" th:each="child : ${menu.children}">
						<li th:class="${#strings.contains(#httpServletRequest.getRequestURI(), child.metadata.links)} ? 'active'">
						<a href="#" th:href="@{${child.metadata.links}}" th:text="${child.metadata.menuName}">상품</a>
						</li>
						<!-- <li th:class="${#strings.contains(#httpServletRequest.getRequestURI(), '/admin/')} ? 'active'" th:if="${sec.hasRole('ROLE_SUPERVISOR')}"><a href="#" th:href="@{/admin/main}">Admin</a></li> -->
					</ul>
					<div th:if="${sec.isAnonymous()}">
						<form class="navbar-form navbar-right"
							th:action="@{/sec/processing}" method="post" autocomplete="off">
							<div class="form-group">
								<input type="text" placeholder="email" class="form-control"
									id="sec_userid" name="sec_userid" />
							</div>
							<div class="form-group">
								<input type="password" placeholder="password"
									class="form-control" id="sec_password" name="sec_password" />
							</div>
							<button class="btn btn-primary" th:text="#{button.login}">로그인</button>
							<a href="#" th:href="@{/member/step1}" class="btn btn-success"
								th:text="#{button.joinMember}">회원가입</a>
						</form>
					</div>
					<div th:if="${!sec.isAnonymous()}">
						<form class="navbar-form navbar-right"
							th:action="@{/sec/logout}" method="post" autocomplete="off">
							<div class="form-group">
								<span class="form-control" th:text="${#authentication.name}"></span>
							</div>
							<button class="btn btn-primary" th:text="#{button.logout}">로그아웃</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:fragment="footer">
		<div class="container">
			<hr />
			<footer>
				<p>&copy; GreenBeanShop 2013</p>
			</footer>
		</div>
		<script th:inline="javascript">
		/*<![CDATA[*/
		    $(document).ready(function(){
		    	$(".jumbotron").css({
		            "background-image" : "url(/*[[@{${IMGURL}+'/jumbo1.png'}]]*/)"
		            , "min-height" : "466px"
		        });
		    });
		/*]]>*/
		</script>
	</div>
	<div th:fragment="adminMenus">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">주문 관리</h3>
			</div>
			<div class="list-group">
				<a href="#" class="list-group-item">주문 현황</a>
				<a href="#" class="list-group-item">메출통계</a>
				<a href="#" class="list-group-item">정산</a>
			</div>
		</div>
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">사이트 관리</h3>
			</div>
			<div class="list-group">
				<a href="#" th:href="@{/admin/menus}" class="list-group-item">메뉴관리</a>
				<a href="#" class="list-group-item">게시판 관리</a>
			</div>
		</div>
	</div>
	<div th:fragment="leftmenus">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">상품</h3>
			</div>
			<div class="list-group">
				<a href="#" class="list-group-item active">블랜딩 원두</a> <a href="#"
					class="list-group-item">나라별 원두</a> <a href="#"
					class="list-group-item">Cup of Excellence</a> <a href="#"
					class="list-group-item">사무실용 원두</a> <a href="#"
					class="list-group-item">커피용품</a>
			</div>
		</div>
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">커뮤니티</h3>
			</div>
			<div class="list-group">
				<a href="#" class="list-group-item">공지사항 및 이벤트</a> <a href="#"
					class="list-group-item">도매 문의</a> <a href="#"
					class="list-group-item">상품후기</a> <a href="#"
					class="list-group-item">회사소개</a>
			</div>
		</div>
	</div>
	<div th:fragment="normalBoardList">
		<div class="row">
			<div class="col-md-4" th:each="o : ${boardList}">
				<h2 th:text="${o.subject }">Heading</h2>
				<p th:text="${o.content }">Donec id elit non mi porta gravida at
					eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
					condimentum nibh, ut fermentum massa justo sit amet risus. Etiam
					porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
				<p>
					<a class="btn btn-default" href="#" role="button">View details
						&raquo;</a>
				</p>
			</div>
		</div>
	</div>
	<div th:fragment="hiddenNotice">
		<script src="//127.0.0.1:8080/goodwildd/resources/js/notice.js"
			th:src="@{${JSURL}+'/notice.js'}" type="text/javascript"></script>
		<script src="//notifyjs.com/dist/notify-combined.js"
			th:src="@{${JSURL}+'/notify.js'}" type="text/javascript"></script>
		<div th:if="${sec.hasRole('ROLE_SUPERVISOR')}">
		<form name="joinChatForm" id="joinChatForm" th:action="@{/rest/notice}">
			<input type="text" id="text" name="text" data-bind="value:message"/>
			<button data-bind="click:postMessage">메시지 전송</button>
		</form>
		</div>
		<script th:inline="javascript">
		/*<![CDATA[*/
		    $(document).ready(function(){
		    	ko.applyBindings(new NoticeViewModel());
		    });
		/*]]>*/
		</script>
	</div>
</body>
</html>